

async function studentsGender(){
    let {data:res} = await axios.get('/students')
    // console.log(res);
    // 遍历
    let arr = res.data.map(item=>{
         // 三元表达式  0表示男  1表示女
        //  <td>${item.gender===0 ? '男' : '女'}</td>
        return `
        <tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender===0 ? '男' : '女'}</td>
        <td>${item.group}</td>
        <td>${item.hope_salary}</td>
        <td>${item.salary}</td>
        <td>${item.province}${item.city}${item.area}</td>
        <td>
          <a href="javascript:;" class="text-success mr-3"><i data-id = ${item.id} class="bi bi-pen"></i></a>
          <a href="javascript:;" class="text-danger"><i data-id = ${item.id}  class="bi bi-trash"></i></a>
        </td>
      </tr>
        `
    })
    document.querySelector('tbody').innerHTML = arr.join('')

}
studentsGender()

// 添加操作
// 模态框
let addModel = new bootstrap.Modal(document.querySelector('#modal'))
document.querySelector('#openModal').addEventListener('click',function(){
    // 修改添加学员的模态框标题
    document.querySelector('#modal h5').innerHTML = '添加学员'
    // 添加时清空模态框
    document.querySelector('#form').reset();
    addModel.show();
})
// 省市县联动
async function initCity(){
    // 准备好省市县下拉框
    let province = document.querySelector('[name = province]')
    let city = document.querySelector('[name = city]')
    let area = document.querySelector('[name = area]')
    // 获取省
    let {data:res} = await axios.get('/api/province')
    // console.log(res);
    // 遍历数据获取数组
    let arr = res.data.map(item =>`<option value = "${item}">${item}</option>`)
    // 将数组装换添加到下拉框中，注意有一个空的省份
    province.innerHTML = '<option value = "">--省份--</option>}' + arr.join('');
    // 获取市
    // 省改变获取市
    province.addEventListener('change',async function(){
        // 切换省的时候，重置县
        area.innerHTML = '<option value = "">--地区--</option>}';
        let pname = province.value
        // 如果省为空时，重置市
        if(pname==='') return  (city.innerHTML = '<option value = "">--城市--</option>}')
        let {data:res} = await axios.get('/api/city',{params:{pname}})
        // console.log(res);
        let arr = res.data.map(item =>`<option value = "${item}">${item}</option>`)
        city.innerHTML = '<option value = "">--城市--</option>}' + arr.join('');
    })
    // 获取县
    city.addEventListener('change',async function(){
        let pname = province.value;
        let cname = city.value;
        if (cname==='') return (area.innerHTML = '<option value = "">--地区--</option>}')
        let {data:res} = await axios.get('/api/area',{params:{pname,cname}});
        // console.log(res);
        let arr = res.data.map(item =>`<option value = "${item}">${item}</option>`)
        area.innerHTML = '<option value = "">--地区--</option>}' + arr.join('');
    })
}
initCity()

// 添加学员确认按钮注册事件
document.querySelector('#submit').addEventListener('click',async function(){
    let data = val(document.querySelector('#form'))
    // console.log(data);
    // 将需要的数据转换为数字类型
    data.age = +data.age;
    data.gender = Number(data.gender);
    data.hope_salary = +data.hope_salary;
    data.salary = +data.salary;
    data.group = +data.group;
    //发送请求之前，判断是添加操作还是修改操作
    let title = document.querySelector('#modal h5').innerHTML
    if(title==='添加学员'){
    //  发生请求
    try{
        await axios.post('/students',data)
        // 成功提示消息
        message.success('添加成功');
        // 重新渲染页面
        studentsGender();
        // 隐藏模态框
        addModel.hide();
    } catch (e){
        // 失败提醒
        message.error('添加失败');
    }   
    } else if(title==='修改学员'){
        try{
            // 发送put请求
            let id = document.querySelector('#modal h5').dataset.id
            // console.log(id);
          let {data:res}  = await axios.put(`/students/${id}`,data);
        //   消息提示
          message.success('修改成功');
        //   关闭弹窗
        addModel.hide();
        //   重新渲染
          studentsGender();
        } catch(e){
            message.error('修改失败')
        }
    }


})


// 委托事件
document.querySelector('tbody').addEventListener('click',async function(e){
    // 判断是不是删除按钮
    if(e.target.classList.contains('bi-trash')){
        let id = e.target.dataset.id
        // console.log(111,id);
        // 删除弹窗提示
        if(!confirm('你确定要删除吗')) return
        try{
            // 发生请求，注意格式
            axios.delete(`/students/${id}`)
            // 提示消息
            await message.success('删除成功')
            // 重新渲染
            studentsGender()
        } catch(e){
            message.error('删除失败')
        }
        // 插件
        // message.confirm('提示','你确定要删除吗',async (res)=>{
        //     if(res){
        //         try{
        //             axios.delete(`/students/${id}`)
        //             await message.success('删除成功')
        //             studentsGender()
        //         } catch(e){
        //             message.error('删除失败')
        //         }
        //     }
        // })
        
    }
    // 判断是不是编辑按钮
    if(e.target.classList.contains('bi-pen')){
        let id = e.target.dataset.id
        // 修改模态框
        document.querySelector('#modal h5').innerHTML = '修改学员'
        // 给修改学员添加自定义id属性,,注意定义id要在前面
        document.querySelector('#modal h5').setAttribute('data-id',id)
        // document.querySelector('#modal h5').setAttribute('data-id',id)
        // 出现弹框
        addModel.show();
        // console.log(22);
        // 数据回填
        // 发送请求，获取数据
        let {data:res} = await axios.get(`/students/${id}`)
        // console.log(res);
        // 获取市县
        let pname = await axios.get('/api/city',{params:{pname:res.data.province}})
        let cname = await axios.get('/api/area',{params:{pname:res.data.province,cname:res.data.city}})
        const result = await Promise.all([pname,cname]);
        // console.log(result);
        let arr1 = result[0].data.data.map(item =>`<option value = "${item}">${item}</option>`);
        document.querySelector('[name = city]').innerHTML = '<option value = "">--城市--</option>'+arr1.join('')

        let arr2 = result[1].data.data.map(item =>`<option value = "${item}">${item}</option>`);
        document.querySelector('[name = area]').innerHTML = '<option value = "">--地区--</option>'+arr2.join('')


        // val回填数据
        val(document.querySelector('#form'),res.data)
    }
})

